<template>
    <div class="process-config" v-loading="loading">
        <div class="content-area">
            <div class="operate-btn">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd(0)">新增</el-button>
                <!--<el-button type="success" icon="el-icon-sort" size="mini" @click="isCollapse = false">展开/折叠</el-button>-->
            </div>
            <div class="table-list">
                <el-table
                        :data="tableData"
                        border
                        height="100%"
                        row-key="id"
                        :default-expand-all="isCollapse"
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column
                            label="案件流程"
                            prop="name" />
                    <el-table-column
                            label="编码"
                            prop="code" />
                    <el-table-column
                            label="处置时间"
                            prop="time">
                        <template slot-scope="scope">
                            <span v-if="scope.row.time != 0">{{ scope.row.time }}分钟</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="创建时间"
                            prop="createTime">
                            <template slot-scope="scope">
                                <span>{{ scope.row.createTime | timeFormat }}</span>
                            </template>
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center"
                            width="280"
                            class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑</el-button>
                            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!--弹出层-->
        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                v-dialogDrag
                v-if="dialogVisible"
                :close-on-click-modal="false"
                width="600px">
            <div class="dialog-content" v-loading="dialogLoading">
                <div class="line-item">
                    <span class="item-name">所属上级：</span>
                    <span class="item-value">
                        <el-select v-model="ownSuperior" clearable :disabled="dialogType === 1">
                            <el-option v-for="item in ownSuperiorData" :value="item.id" :label="item.name"
                                       :key="item.id"></el-option>
                        </el-select>
                    </span>
                </div>
                <div class="line-item">
                    <span class="item-name"><i>*</i>流程名称：</span>
                    <span class="item-value">
                        <el-input v-model="caseProcessName" placeholder="请输入流程名称"></el-input>
                    </span>
                </div>
                <div class="line-item">
                    <span class="item-name"><i>*</i>编码：</span>
                    <span class="item-value">
                        <el-input v-model="caseProcessCode" placeholder="请输入编码"></el-input>
                    </span>
                </div>
                <div class="line-item" v-if="dialogType === 2">
                    <span class="item-name">处置时间：</span>
                    <span class="item-value">
                        <el-input v-model="disposalTime" placeholder="请输入处置时间"></el-input>
                        <el-input class="time-unit" value="分钟" disabled></el-input>
                    </span>
                </div>
            </div>
            <div class="dialog-footer">
                <el-button type="primary" size="small" @click="confirmEvent" :disabled="dialogLoading">确 定</el-button>
                <el-button size="small" @click="dialogVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { getProcessList, getProcessParentList, newAddCaseProcess, editCaseProcess, deleteCaseProcess } from "@/api/configure/configure";
    export default {
        name: 'Processconfig',
        data () {
            return {
                // 页面加载
                loading: false,
                // 列表数据
                tableData: [{}],
                // 是否展开列表数据
                isCollapse: true,
                // 弹出层相关参数
                // 弹出层显示类型
                dialogType: 0, // 0——父级新增；1——父级编辑；2——子级编辑；
                // 弹出层标题
                dialogTitle: '',
                // 显示参数
                dialogVisible: false,
                // 弹出层加载
                dialogLoading: false,
                // 所属上级
                ownSuperior: '',
                // 所属上级下拉数据
                ownSuperiorData: [],
                // 案件流程名称
                caseProcessName: '',
                // 案件流程编码
                caseProcessCode: '',
                // 处置时间
                disposalTime: '',
                // 流程id
                processId: '',
            }
        },
        methods: {
            /**
             * Description:获取列表数据
             * Author:ybt
             * Date:2020/9/22
             */
            getListData(type){
                this.loading = true;
                getProcessList({}).then((res) => {
                    res.data.forEach(item => {
                        if (item.children) {
                            item.children = JSON.parse(item.children)
                        }
                    })
                    this.tableData = res.data;
                    if (type === 0) {
                        this.$message.success('新增成功');
                    } else if (type === 1 || type === 2) {
                        this.$message.success('编辑成功');
                    } else if (type === 3) {
                        this.$message.success('删除成功');
                    }
                    this.loading = false;
                }).catch((error) => {
                    this.loading = false;
                    console.log(error, 'getProcessList');
                });
            },
            /**
             * Description:获取流程父级数据
             * Author:ybt
             * Date:2020/9/22
             */
            getProcessParentList(){
                getProcessParentList({}).then((res) => {
                    this.ownSuperiorData = res.data;
                }).catch((error) => {
                    this.loading = false;
                    console.log(error, 'getProcessParentList');
                });
            },
            /**
             * Description:新增
             * Author:ybt
             * Date:2020/9/22
             */
            handleAdd(){
                this.dialogType = 0;
                // 所属上级
                this.ownSuperior = '';
                // 案件流程名称
                this.caseProcessName = '';
                // 案件流程编码
                this.caseProcessCode = '';
                // 处置时间
                this.disposalTime = '';
                this.dialogTitle = '新增案件流程状态';
                // 获取流程父级数据
                this.getProcessParentList();
                this.dialogLoading = false;
                this.dialogVisible = true;
            },
            /**
             * Description:编辑
             * Author:ybt
             * Date:2020/9/22
             */
            handleUpdate(row){
                if (!row.parentId) {
                    this.dialogType = 1;
                } else {
                    this.dialogType = 2;
                    // 所属上级
                    this.ownSuperior = Number(row.parentId);
                }
                this.dialogTitle = '编辑案件流程状态';
                // 获取流程父级数据
                this.getProcessParentList();
                // 案件流程名称
                this.caseProcessName = row.name;
                // 案件流程编码
                this.caseProcessCode = row.code;
                // 处置时间
                this.disposalTime = row.time;
                // 流程id
                this.processId = row.id;
                this.dialogLoading = false;
                this.dialogVisible = true;
            },
            /**
             * Description:【新增】或【编辑】确认事件
             * Author:ybt
             * Date:2020/9/22
             */
            confirmEvent(){
                this.dialogLoading = true;
                if (this.caseProcessName === '') {
                    this.$message.error('请输入流程名称');
                    this.dialogLoading = false;
                    return
                } else if (this.caseProcessCode === '') {
                    this.$message.error('请输入编码');
                    this.dialogLoading = false;
                    return
                }
                let url = null;
                let option = {
                    name: this.caseProcessName,
                    code: this.caseProcessCode,
                    parentId: this.ownSuperior,
                    time: this.disposalTime
                };
                if (this.dialogType === 0) {
                    url = newAddCaseProcess;
                } else if (this.dialogType === 1 || this.dialogType === 2) {
                    url = editCaseProcess;
                    option.id = this.processId;
                }
                url(option).then(() => {
                    this.getListData(this.dialogType);
                    this.dialogVisible = false;
                    this.dialogLoading = false;
                }).catch((error) => {
                    this.dialogLoading = false;
                    console.log(error, 'url');
                });
            },
            /**
             * Description:删除
             * Author:ybt
             * Date:2020/9/22
             */
            handleDelete(row){
                this.$confirm('确定删除该条案件流程信息吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.loading = true;
                    deleteCaseProcess({id: row.id}).then(() => {
                        this.getListData(3);
                    }).catch((error) => {
                        this.loading = false;
                        console.log(error, 'deleteCaseProcess');
                    });
                }).catch(() => {
                    this.$message.info('已取消删除');
                });
            },

        },
        created(){
            // 获取列表数据
            this.getListData();
        },
    }
</script>

<style lang="scss">
    .process-config{
        width: 100%;
        height: 100%;
        display: flex;
        overflow: hidden;
        padding: 0.1875rem;
        .content-area{
            display: flex;
            flex-direction: column;
            flex: 1;
            background-color: #FFFFFF;
            padding: 0.125rem;
            border-radius: 0.075rem;
            margin-top: 0.1875rem;
            overflow: hidden;
            .table-list{
                display: flex;
                flex: 1;
                margin: 0.125rem 0;
                overflow: hidden;
                .el-table{
                    flex: 1;
                    overflow-y: auto;
                }
            }
        }
        .el-dialog{
            .dialog-content{
                height: 3.75rem;
                padding: 0 0.625rem 0.125rem 0.375rem;
                .line-item{
                    display: flex;
                    flex-direction: row;
                    margin-bottom: 0.1875rem;
                    .item-name{
                        width: 1.25rem;
                        text-align: right;
                        line-height: 0.425rem;
                        i{
                            color: #f00;
                            padding-right: 0.0375rem;
                        }
                    }
                    .item-value{
                        display: flex;
                        flex: 1;
                        .el-input,.el-select{
                            width: 100%;
                            height: 0.425rem;
                            line-height: 0.425rem;
                        }
                        .time-unit{
                            width: 50% !important;
                            margin-left: 0.25rem;
                        }
                    }
                }
            }
            .dialog-footer{
                text-align: center;
            }
        }
    }
</style>
